<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title>优酷</title>
    <style>
       body{
           margin: 0;
       }
       .container{
           width: 1200px;
           margin: 0 auto;
       }
       nav{
           width: 100%;
           height: 50px;
             line-height: 50px;  
           background-color: #292929;
       }
       ul{
           padding: 0;
           margin: 0;
           list-style: none;
       }
       .nav-list{
          display: flex;
       }
     .nav-list li{
           margin-right: 30px;
       }
       li a{
           color: white;
           font-size: 14px;
           text-decoration: none;
       }
       .active a{
           color: #E6C37D;
       }
       .nav-list li a:hover{
           color: #E6C37D;
       }
       .movie{
           width: 85px;
           height: 90px;
       }
       .series{
           width: 80px;
           height: 160px;
       }
       .movie,.series{
           margin-top: -12px;
           margin-left: -10px;
           position: absolute;
           background-color: #292929;
           display: none;  
       }
       .nav-list li:hover .movie{
           display: block;
       }
       .nav-list li:hover .series{
           display: block;
       }
       .movie li,.series li{
           margin-bottom: -15px;
       }
       .movie li a,.series li a{
              display: inline-block;
              padding-left: 10px;
              width: 70px; 
              height: 30px; 
              line-height: 30px;
       }
       .movie li a:hover,.series li a:hover{
           background-color: lightgray;
           color: white;
       }
       
    </style>
</head>
<body>
   <nav>
       <div class="container">
       <ul class="nav-list">
           <li class="active"><a href="#" >会员首页</a></li>
           <li><a href="#">看电影</a>
             <ul class="movie">
                 <li><a href="#">华语电影</a></li>
                 <li><a href="#">海外大片</a></li>
             </ul>
           </li>
           <li><a href="#">看剧</a>
            <ul class="series">
                <li><a href="#">美剧</a></li>
                <li><a href="#">英剧</a></li>
                <li><a href="#">港剧</a></li>
                <li><a href="#">韩剧</a></li>
            </ul>
           </li>
           <li><a href="#">看动漫</a></li>
           <li><a href="#">纪录片</a></li>
           <li><a href="#">德云社</a></li>
           <li><a href="#">看直播</a></li>
       </ul>



       </div>
   </nav>
</body>
</html>
<script>
    // var movie = document.querySelector('.movie');
    

    // for(var i = 0;i<lis.length;i++){
    //      lis[i].index=i;
    //      lis[i].onmouseover = function(){
    //          lis[i].className = '';
    //      }
    //       lis[this.index].className ='active';
    // }
</script>